<template>
<div>
  <el-upload
    ref="upload"
    class="upload"
    action
    list-type="picture-card"
    :auto-upload="false"
    :on-change="handleGetFile"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img
          class="el-upload-list__item-thumbnail"
          :src="file.url" alt=""
        >
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <i class="el-icon-download"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>

</template>

<script>
/* eslint-disable */
// upload_file
import { mapGetters, mapMutations, mapActions } from 'vuex'
 export default {
    props: {
      formLabelAlign: {
        type: Object
      }
    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        imageUrl: ''
      }
    },
    computed: {
      ...mapGetters(['submit'])
    },
    watch: {
      submit(v) {
        this.$refs.upload.submit()
        this.SET_SUBMIT(false)
        // 上传没有action的
        this.updateActionUpload(this.formLabelAlign)
        // 上传有action的
        // this.updateUploadFile(this.formLabelAlign)
      }
    },
    mounted() {
    },
    methods: {
      ...mapActions('table', ['updateUploadFile', 'getUploadFile', 'updateActionUpload']),
      ...mapMutations('table', ['SET_SUBMIT']),
      async handleGetFile(file) {
        // console.log(this.getBase64(file))
        console.log('file------:', file)
        let data = await this.getBase64(file)
        // console.log('data:', data)
        // 图片上传的地方
        // console.log(file, 'file')
        // this.upload_file(file)
        // data:image/jpeg;base64,
        this.getUploadFile(data)
      },
      // 转base64函数
      getBase64(file) {
        return new Promise((resolve, reject) => {
          let fileReader = new FileReader();
          fileReader.readAsDataURL(file.raw);
          fileReader.onload = function() {
            // console.log(typeof fileReader.result);
            resolve(fileReader.result.replace(/^data:image\/\w+;base64,/, ''))
          }
        })
      },
      handleRemove(file) {
        // console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        // console.log(file);
      },
    }
  }
/* eslint-disable */
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
